<template>
    <div id="app">
        <el-container direction="vertical" style="height: 100%">
            <el-header style="background-color:#303030; padding-top: 10px;height: auto;">
                <el-row>
                    <el-col :span="1" :offset="1" style="">
                        <el-image :src="require('@/img/fifteen.png')"
                        ></el-image>
                    </el-col>
                    <el-col :span="3" :offset="3" style="height: auto;width: 140px;">
                        <el-button type="text" @click="dialogVisible = true">
                            <el-image :src="require('@/img/logo.png')"
                                      style=""></el-image>
                        </el-button>
                        <el-dialog
                                title="系统管理员"
                                :visible.sync="dialogVisible"
                                width="30%"
                        >
                            <!--:before-close="handleClose"-->
                            <div v-show="!this.$login">
                                <el-form :model="formData" label-position="top">
                                    <el-form-item label="用户名">
                                        <el-input v-model="formData.username" clearable
                                                  placeholder="请输入您的用户名" prefix-icon="el-icon-user"></el-input>
                                    </el-form-item>
                                    <el-form-item label="密码">
                                        <el-input v-model="formData.password" clearable
                                                  placeholder="请输入您的密码" show-password
                                                  prefix-icon="el-icon-lock"></el-input>
                                    </el-form-item>
                                    <el-button type="primary" plain @click="handleLogin">登录</el-button>
                                    <el-button type="success" plain @click="dialogVisible = false">取消</el-button>
                                </el-form>
                            </div>
                            <div v-show="this.$login">
                                <el-form label-position="top">
                                    <el-form-item label="角色">
                                        <h5>系统管理员</h5>
                                    </el-form-item>
                                    <el-button type="warning" plain @click="handleLogout">注销</el-button>
                                </el-form>
                            </div>
                        </el-dialog>
                    </el-col>
                    <el-col :span=13 :offset="2">
                        <el-menu default-active="/home" class="el-menu-demo" mode="horizontal" @select="handleSelect"
                                 style="border: 1px solid;border-radius: 1px;">
                            <!--                            头栏   -->
                            <el-menu-item style="font-size: large" index="/home" class="el-icon-s-home">首页
                            </el-menu-item>
                            <el-menu-item style="font-size: large" index="/saleAnaly/totalSale"
                                          class="el-icon-data-analysis">
                                销售分析
                            </el-menu-item>
                            <el-menu-item style="font-size: large" index="/recommendation" class="el-icon-s-goods">
                                推荐系统
                            </el-menu-item>
                            <el-menu-item style="font-size: large" index="/complaintsAnaly/brandComplaintType"
                                          class="el-icon-s-data">
                                投诉分析
                            </el-menu-item>
                            <el-menu-item style="font-size: large" index="/systemMessage/scheduler"
                                          v-show="this.$login">
                                <i class="el-icon-setting"></i>系统运行
                            </el-menu-item>
                        </el-menu>
                    </el-col>
                </el-row>
            </el-header>
            <el-main>
                <transition name="fade" mode="out-in">
                    <router-view/>
                </transition>
            </el-main>
        </el-container>

    </div>
</template>

<script>
    import Vue from "vue";

    let App = {
        data() {
            return {
                activeIndex: '1',
                dialogVisible: false,
                // showSystemMessage:false,
                formData: {
                    username: '',
                    password: '',
                },
            }
        },
        methods: {
            handleLogin() {
                if (this.formData.username.length == 0) {
                    console.log(1)
                    this.$message.warning("用户名不为空");
                    return;
                }
                if (this.formData.password.length == 0) {
                    this.$message.warning("密码不为空");
                    return;
                }
                this.$http.post('/login', {
                    'username': this.formData.username,
                    'password': this.formData.password,
                }).then(form => {
                    console.log(form);
                    let data = form.data;
                    if (data.status != 0) {
                        this.$message.error(data.msg);
                        return;
                    }
                    this.$cookie.set('cartoken', data.cartoken, 1);
                    this.$message.success("欢迎登录");
                    this.$login = true;
                    this.dialogVisible = false;
                })

            },
            handleLogout() {
                this.$cookie.delete('cartoken');
                this.$login = false;
                this.dialogVisible = false;
                this.$message.success("成功注销");
                this.$router.push({path: '/home'})
            },
            handleSelect(key, keyPath) {
                this.$router.push({path: key});
            },
        },
        mounted() {
            if (this.$cookie.get('cartoken') != null) {
                this.$login = true;
                // this.showSystemMessage = true;
            } else {
                this.$login = false;
                // this.showSystemMessage = false;
            }
            this.$router.push({path: '/home'});
        },
    }
    export default App
</script>

<style>
    .rob {
        visibility: hidden;
    }

    html, body, #app {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        color: #2c3e50;
        /*text-align: center;*/
        height: 100%;
        /*background-color: gainsboro;*/
        background-color: #E5E5E5;
    }

    .fade-enter-active, .fade-leave-active {
        transition: opacity .5s;
    }

    .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */
    {
        opacity: 0;
    }
</style>
